<template>
<!-- 下拉列中的数据 -->
  <el-table
    :data="tableData"
    @selection-change="onSelectionChange"
    style="width: 100%"
    stripe
    size="mini"
    v-loading="tableLoading"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="month" label="计费期" />
    <el-table-column prop="chargeItemName" label="收费项目" />
    <el-table-column prop="feeAccount" label="应收金额" />
    <el-table-column prop="feePayment" label="已收金额" />
    <el-table-column prop="feeBalance" label="欠款" />
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableLoading: false,
      tableData: [
        {
          id: "1",
          month: "2019-10",
          chargeItemName: "物业费",
          feeAccount: 125,
          feePayment: 0,
          feeBalance: 125
        },
        {
          id: "2",
          month: "2019-10",
          chargeItemName: "垃圾费",
          feeAccount: 6,
          feePayment: 0,
          feeBalance: 6
        },
        {
          id: "3",
          month: "2019-10",
          chargeItemName: "电梯费",
          feeAccount: 50,
          feePayment: 0,
          feeBalance: 50
        },
        {
          id: "4",
          month: "2019-11",
          chargeItemName: "物业费",
          feeAccount: 125,
          feePayment: 0,
          feeBalance: 125
        },
        {
          id: "5",
          month: "2019-11",
          chargeItemName: "垃圾费",
          feeAccount: 6,
          feePayment: 0,
          feeBalance: 6
        },
        {
          id: "6",
          month: "2019-11",
          chargeItemName: "电梯费",
          feeAccount: 50,
          feePayment: 0,
          feeBalance: 50
        }
      ]
    };
  },
  methods: {
    onSelectionChange(items) {
      console.log(items);
    }
  }
};
</script>